<template>
  <div class="tongzhilist">
    <van-sticky>
      <div class="top">
        <div
          class="iconfont icon-arrowRight-copy-copy"
          @click="$router.push('/home/recommend')"
        ></div>
        <div class="news">消息中心</div>
        <div class="read">全部已读</div>
      </div>
    </van-sticky>

    <div class="icon">
      <div class="icons">
        <div class="radius">
          <div class="iconfont icon-pinglun"></div>
        </div>
        <p>评论和@</p>
      </div>
      <div class="icons">
        <div class="radius"><div class="iconfont icon-shoucang"></div></div>
        <p>收藏和赞</p>
      </div>
      <div class="icons">
        <div class="radius"><div class="iconfont icon-wode1"></div></div>
        <p>新的粉丝</p>
      </div>
    </div>

    <div class="all">
      <div class="hot">热门活动</div>
      <div class="hots">全部活动</div>
    </div>

    <div class="swiper-container swiper-container-00">
      <div class="swiper-wrapper">
        <div class="swiper-slide item">
          <img
            src="https://i1.douguo.com//upload/note/8/4/6/84c2a2aeecbc9023fc06139c26553c36.jpg"
            alt=""
          />
        </div>
        <div class="swiper-slide item">
          <img
            src="https://i1.douguo.com//upload/banner/1/9/c/19b9199e23851967daa68f5f93e7306c.jpg"
            alt=""
          />
        </div>
        <div class="swiper-slide item">
          <img
            src="https://i1.douguo.com//upload/note/a/b/a/ab9147ea223e094a96d2b4c73311b0fa.jpg"
            alt=""
          />
        </div>
        <div class="swiper-slide item">
          <img
            src="https://i1.douguo.com//upload/note/1/0/2/105770025aa40076d5d55a9a66bcd112.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="all">
      <div class="hot">私信消息</div>
    </div>
    <div class="message">
      <div class="icons">
        <div class="radius">
          <div class="iconfont icon-pinglun"></div>
        </div>
      </div>
      <div class="title">
        <div>官方通知</div>
        <div>官方通知官方通知官方通知</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  mounted() {
    new Swiper(".swiper-container-00", {
      pagination: ".swiper-pagination-00",
      slidesPerView: 2,
      paginationClickable: true,
      observer: true,
      observeParents: true, 
      freeMode: true,
    });
  },
};
</script>

<style lang='less'>
.tongzhilist {
  .top {
    background: #fff;
    padding-bottom: 5px;
    margin: 0 20px;
    padding-top: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .iconfont {
      flex: 1;
      font-size: 20px;
      font-weight: bold;
    }
    .news {
      flex: 1;
    }
    .read {
      border: 1px solid #f2f2f2;
      border-radius: 30px;
      padding: 7px;
    }
  }
  .icon {
    margin: 0 30px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    .icons {
      text-align: center;

      .radius {
        display: inline-block;
        background: #facb41;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        .iconfont {
          line-height: 45px;
          font-size: 20px;
        }
        .icon-shoucang {
          font-weight: bold;
        }
      }
      p {
        margin-top: 10px;
      }
    }
  }
  .all {
    display: flex;
    justify-content: space-between;
    padding: 15px 15px 10px 15px;
    font-weight: bold;
    background: #fafafa;
    .hot {
    }
    .hots {
      color: #909090;
    }
  }
  .swiper-container-00 {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    .swiper-wrapper {
      .item {
        img {
          margin-right: 10px;
          width: 169px;
          height: 82px;
          border-radius: 10px;
        }
      }
    }
  }
  .message {
    display: flex;

  margin-top: 15px;
    .icons { margin: 0 15px;
      .radius {
        text-align: center;
        display: inline-block;
        background: #facb41;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        .iconfont {
          line-height: 45px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>